<template>
  <div ref="mesChart"></div>
</template>

<script>
export default {
  name: 'WorkCenterBar',
  data() {
    return {
      wipList: [], // 原始数据
      xAxisList: [], // X轴数组
      yAxisList: [], // Y轴数组
      myChart: {}, // 初始化画布
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.mesChart)
  },
  methods: {
    // 获取图表
    getChart(wipList) {
      this.wipList = wipList
      this.xAxisList = this.wipList.map(item => item.name)
      this.yAxisList = this.wipList.map(item => item.number)
      this.init()
    },
    init() {
      let dataZoom = [
        {
          type: 'slider',
          show: false,
          showDetail: false,
          start: 0,
          end: 100,
          bottom: 10,
          height: 16,
          handleStyle: {
            /*手柄的样式*/
            color: '#fff',
            borderWidth: 2,
            borderColor: '#a1b1c1'
          },
        }
      ]
      let max = 12
      if (this.wipList.length >= max) {
        let end = Math.floor(max / this.wipList.length * 100)
        dataZoom.forEach(item => {
          item.end = end
          item.show = true
        })
      }
      this.drawBarChart(dataZoom)
    },
    drawBarChart(dataZoom) {
      this.myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'shadow'},
          textStyle: {fontSize: 12},
          backgroundColor: 'rgba(0, 0, 0, 0.85)',
        },
        // 缩放,滚动
        dataZoom: dataZoom,
        // 画板边距
        grid: {
          left: '60',
          right: '60'
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxisList,
            // x轴轴线颜色和宽度
            axisLine: {
              lineStyle: {
                color: '#dcdfe6',
                width: 2
              }
            },
            // x轴字体颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(0, 0, 0, 0.65)'
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '在制品数量',
            // Y轴虚线
            splitLine: {
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.1)',
                width: 1,
                type: 'dashed'
              }
            },
            // y轴轴线
            axisLine: {
              show: false
            },
            //y轴刻度线
            axisTick: {
              show: false
            },
          },
        ],
        // 数据
        series: [
          {
            name: '在制品数量',
            type: 'bar',
            data: this.yAxisList,
            stack: '数量',
            barMaxWidth: 160,
            barMinHeight: 10,
            itemStyle: {
              normal: {
                color: '#1890ff',
                opacity: 0.85
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
